<template>
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="form" label-width="150px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="卡券名称" prop="style_name">
            <el-input v-model="form.style_name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="样式类型" prop="style_type">
            <el-radio v-model="form.style_type" :label="1">卡</el-radio>
            <el-radio v-model="form.style_type" :label="2">券</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传样式">
            <div class="newbox">
              <div class="newimg" v-for="(item, index) in fileList1" :key="index">
                <img :src="item.url" alt />
                <span @click="close(index,1)">X</span>
              </div>

              <imgload :width="670" :height="310 " @imgfun="imgfun"></imgload>
            </div>
            <p>点击上传样式，建议尺寸670*310</p>
          </el-form-item>
        </el-col>
      </el-row>
      <p style="text-align: center;">
        <el-button style="margin:30px 0" type="primary" @click="submitFn('form')">立即提交</el-button>
      </p>
    </el-form>
  </div>
</template>

<script>
import imgload from "@/components/tailoring/index";
import { add, detail, create } from "@/api/CouponStore/Cardstyle";
export default {
  components: { imgload },
  name: "",
  data() {
    return {
      form: {},
      rules: {
        style_name: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        style_type: [{ required: true, message: "请输入类型", trigger: "blur" }]
      },
      fileList1: []
    };
  },
  created() {
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑样式";
      this.detailfn();
    } else {
      this.$route.meta.title = "新加样式";
    }
  },
  methods: {
    async detailfn() {
      let res = await detail({ id: this.$route.query.id });
      if (res.data.code == 200) {
        this.form = res.data.data;
        this.fileList1 = [
          {
            url:  res.data.data.style_pic.indexOf('http')>-1?res.data.data.style_pic:localStorage.getItem("imgUrlPrefix") + res.data.data.style_pic
          }
        ];
      }
    },
    submitFn() {
      if (this.fileList1.length == 0) {
        this.$message.warning("请上传图片");
        return;
      }
      if (this.form.style_pic.indexOf('http') >-1) {
        this.$message.warning("图片格式有问题，请联系后台或请重新上传图片");
        return;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.$route.query.id) {
            //编辑
            this.editfn();
          } else {
            //新增
            this.addfn();
          }
        }
      });
    },
    async editfn() {
      let res = await create(this.form);
      this.$message.warning(res.data.msg);
      if (res.data.code == 200) {
        this.$router.push({ name: "Cardstyle" });
      }
    },
    async addfn() {
      let res = await add(this.form);

      this.$message.warning(res.data.msg);
      if (res.data.code == 200) {
        this.$router.push({ name: "Cardstyle" });
      }
    },
    close(index, type) {
      this.fileList1.splice(index, 1);
    },
    imgfun(res) {
      this.form.style_pic = res;
      this.fileList1 = [
        {
          url: localStorage.getItem("imgUrlPrefix") + res
        }
      ];
    }
  }
};
</script>
<style scoped>
.newbox {
  position: relative;
  display: flex;
  align-items: center;
}
.newbox /deep/ .footerBtn {
  height: 34px;
  margin-left: 22px;
}
.newimg {
  width: 148px;
  height: 148px;
  margin-left: 25px;
  position: relative;
}
.newimg img {
  width: 100%;
  height: 100%;
}
.newimg span {
  position: absolute;
  font-size: 15px;
  right: 6px;
  top: 0;
  cursor: pointer;
}
.app-container {
  padding: 20px !important;
}
</style>